<template>
  <div class="login">
    <myHeader
      :isback='isback'
      :title='title'
      :iconnameleft="iconnameleft"
      :iconnameright="iconnameright"
      :backgroundColor="backgroundColor"
    />
    <div class="logo">
      <img
        src="../../assets/images/logo1024.jpg"
        alt=""
      >
    </div>
    <div class='input-item'>
      <img
        src="../../assets/images/59.png"
        alt=""
      >
      <input
        type="text"
        placeholder="手机号"
        v-model="registerData.mobile"
      >

    </div>

    <div class='input-item'>
      <img
        src="../../assets/images/55.png"
        alt=""
      >
      <input
        type="text"
        placeholder="请输入验证码"
        v-model="registerData.code"
      >
      <button
        @click="getCode"
        :disabled='isget'
      >| {{button}}</button>
    </div>
    <div class='input-item'>
      <img
        src="../../assets/images/55.png"
        alt=""
      >
      <input
        type="password"
        placeholder="请输入密码"
        v-model="registerData.password"
      >
    </div>
    <div class='input-item'>
      <img
        src="../../assets/images/55.png"
        alt=""
      >
      <input
        type="password"
        placeholder="请确认密码"
        v-model="registerData.verify_password"
      >
    </div>
    <div class='input-item'>
      <img
        src="../../assets/images/55.png"
        alt=""
      >
      <input
        type="text"
        placeholder="邀请码"
        v-model="registerData.invitation_code"
        :disabled='disabled'
      >
    </div>
    <div class='input-item submit'>
      <input
        type="submit"
        value="注册"
        @click="register"
      >
    </div>

  </div>
</template>
<script>
import { register, getcode } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      isfull: false,
      button: "获取",
      isget: false,
      disabled:false,
      registerData: {
        mobile: null,
        password: null,
        verify_password: null,
        code: null,
        sms_id: null,
        invitation_code: null
      }
    };
  },
  methods: {
    getCode() {
      const that = this;
      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.registerData.mobile)) {
        Toast("请输入正确的手机号码 ");
      } else {
        getcode({ mobile: this.registerData.mobile })
          .then(res => {
            if (res.status == 200) {
              console.log(132)
              this.registerData.sms_id = res.data.sms_id;
              Toast("获取验证码成功");
              that.isget = true;
              var s = 60;
              var times = setInterval(() => {
                s--;
                that.button = `已发送(${s})秒`;
                if (s <= 0) {
                  clearInterval(times);
                  this.isget = false;
                  this.button = "获取验证码";
                }
              }, 1000);
            } else Toast("获取验证码异常");
          })
          .catch(err => {});
      }
    },
    register() {
      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.registerData.mobile)) {
        Toast("请输入正确的手机号码 ");
        return;
      }
      if (!this.registerData.code) {
        Toast("请输入验证码");
        return;
      }
      if (!/^[\w_-]{6,16}$/.test(this.registerData.password)) {
        Toast("请输入6-16位密码");
        return;
      } if (!/^[\w_-]{6,16}$/.test(this.registerData.verify_password)) {
        Toast("请输入6-16位确认密码");
        return;
      }
      if(this.registerData.password != this.registerData.verify_password) {
        Toast('两次密码不一致');
        return;
      }
      if (!this.registerData.invitation_code) {
        Toast("请输入邀请码");
        return;
      }
      register(this.registerData).then(res => {
        if(res.status == 200) {
          Toast('注册成功，请返回登录');
          setTimeout(() => {
            this.$router.push({
              path:'/login'
            })
          },1200)

        } else {
          Toast('注册失败')
        }
      }).catch(() => {
        Toast('请检查网络')
      })
    }
  },
  created() {
    const code = this.$route.query.code;
    if(code) {
      this.registerData.invitation_code = code;
      this.disabled = true;
    }
  }
};
</script>

<style lang="scss">
.login {
  width: 100%;
  background-color: #eb5f17;
  .logo {
    padding-top: 50px;
    padding-bottom: 20px;
    text-align: center;
    img {
      width: 30%;
      border-radius: 50%;
    }
  }
  .input-item {
    width: 80%;
    margin: 0 auto;
    height: 45px;
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 10px;
    overflow: hidden;
    img {
      position: absolute;
      left: 15px;
      top: 10px;
      width: 24px;
      height: 24px;
      z-index: 2;
    }
    button {
      position: absolute;
      right: 15px;
      top: 10px;
      color: #fff;
      font-size: 16px;
      outline: none;
      border: none;
      background: none;
    }
    input {
      color: #fff;
      font-size: 16px;
      width: 100%;
      height: 100%;
      background: none;
      border: none;
      outline: none;
      border: 1px solid #fff;
      border-radius: 30px;
      -webkit-border-radius: 30px;
      padding-left: 50px;
    }
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #fff;
      /* placeholder字体大小  */
      font-size: 16px;
      /* placeholder位置  */
      // text-align: right;
    }
  }
  .submit {
    letter-spacing: 2px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    input {
      padding-left: 0;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 3px;
      background-color: #fff;
      color: #e71434;
    }
  }
  .operate {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 16px;
    color: #fff;
  }
}
</style>

